<template>
  <div class="main" v-if="zfNameflag">
    <govheader title="化工产业大脑 · 安全总览"></govheader>
    <govnavigation></govnavigation>
    <el-row class="content" :gutter="10" style="padding-left: 15px;padding-right: 5px;" v-if="zfNameflag">
      <el-col :span="8" class="content-left" style="width: 35.046%">
        <el-col class="box">
          <div class="title">园区风险评估</div>
          <div class="content-body">
            <div style="width: 100%;height: 174px;background: #E0EBFE;border-radius: 10px;position: relative;">
              <div v-show="echarts2ShowFlag" id="annular2" style="width: 100%;height: 174px"></div>
              <div v-show="!echarts2ShowFlag" style="width: 100%;height: 174px;color: #909399;font-size: 14px;text-align: center;line-height: 170px;">暂无数据</div>
              <div v-show="echarts2ShowFlag" style="position: absolute;right: 75px;top: 30px;">
                <div>
                  <div class="title-blue"></div>
                  <span class="title-content">园区安全等级分布</span>
                </div>
              </div>
            </div>
            <el-table
              ref="table1"
              :data="tableData1"
              style="width: 100%;margin-top: 10px;"
              height="224px"
              :cell-style="{padding:'6px 0px', height: '36px'}"
              :header-cell-style="{backgroundColor:'#CADFFF', color:'#4A6899', padding:'6px 0px'}"
              :cell-class-name="tableRowClassName">
              <el-table-column type="index" label="排名" width="60" align="center"></el-table-column>
              <el-table-column property="parkName" align="center" :show-overflow-tooltip="true" label="园区名称"></el-table-column>
              <el-table-column property="score" align="center" label="安全评分"></el-table-column>
              <el-table-column property="assessmentLevel" align="center" label="安全等级"></el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col class="box" style="margin-bottom: 0px;">
          <div class="title">重点监管的危险化工工艺</div>
          <div class="content-body">
            <div class="craft-body">
              <div class="craft-title">
                <span class="title-content">重点监管的危险化工工艺</span>
              </div>
              <div class="craft-value">{{keySupervisionTechnologyAndEntCount.keySupervisionTechnologyCount}}</div>
            </div>
            <div class="craft-body" style="margin-left: 15px;">
              <div class="craft-title">
                <span class="title-content">涉及企业数</span>
              </div>
              <div class="craft-value">{{keySupervisionTechnologyAndEntCount.keySupervisionTechnologyEntCount}}</div>
            </div>
            <div v-show="echarts3ShowFlag" id="annular3" style="width: 100%;height: 185px"></div>
            <div v-show="!echarts3ShowFlag" style="width: 100%;height: 185px;color: #909399;font-size: 14px;text-align: center;line-height: 180px;">暂无数据</div>
          </div>
        </el-col>
      </el-col>
      <el-col :span="7" class="content-center" style="background-color: (255, 255, 255, 0.5);width: 29.9%;">
        <div style="position: relative;">
          <div id="annular1" style="width: 100%;height: 461px"></div>
          <div class="legend-body">
            <div class="legend-content" @click="changeMap('重点监管危险化工工艺')">
              <div class="legend-point" style="background: #F63F5E;"></div>
              <div class="legend-title">重点监管危险化工工艺</div>
              <div class="legend-value" style="color: #F63F5E;">{{inProvinceTotal.technologyCount}}</div>
            </div>
            <div class="legend-content" @click="changeMap('重点监管危化品')">
              <div class="legend-point" style="background: #FF8C2F;"></div>
              <div class="legend-title">重点监管危化品</div>
              <div class="legend-value" style="color: #FF8C2F;">{{inProvinceTotal.chemicalCount}}</div>
            </div>
            <div class="legend-content" @click="changeMap('重大危险源')">
              <div class="legend-point" style="background: #5F83FF;"></div>
              <div class="legend-title">重大危险源</div>
              <div class="legend-value" style="color: #5F83FF;">{{inProvinceTotal.dangerSourceCount}}</div>
            </div>
            <div class="legend-content" @click="changeMap('今日安全作业数')">
              <div class="legend-point" style="background: #65D77B;"></div>
              <div class="legend-title">今日安全作业数</div>
              <div class="legend-value" style="color: #65D77B;">{{inProvinceTotal.jobCount}}</div>
            </div>
          </div>
        </div>
        <div class="box" style="margin-top: 10px;margin-bottom: 0px;">
          <div class="title">重点监管危化品</div>
          <div class="content-body">
            <div class="chemicals-body">
              <span class="title-content">重点监管危化品种类</span>
              <div class="chemicals-value">{{keySupervisionChemicalsType.keySupervisionChemicalsTypeCount}}</div>
            </div>
            <div class="chemicals-body" style="margin-left: 15px;">
              <span class="title-content">园区危化品种类</span>
              <div class="chemicals-value">{{keySupervisionChemicalsType.keySupervisionChemicalsTypeParkCount}}</div>
            </div>
            <el-table
              ref="table2"
              :data="tableData2"
              style="width: 100%;margin-top: 10px;"
              height="187px"
              :cell-style="{padding:'6px 0px', height: '36px'}"
              :header-cell-style="{backgroundColor:'#CADFFF', color:'#4A6899', padding:'6px 0px'}"
              :cell-class-name="tableRowClassName">
              <el-table-column type="index" label="排名" width="60" align="center"></el-table-column>
              <el-table-column property="parkName" :show-overflow-tooltip="true" label="园区名称"></el-table-column>
              <el-table-column property="chemicalTypeCount" align="center" label="涉及重点监管危化品种类"></el-table-column>
              <el-table-column property="entCount" align="center" label="涉及重点监管危化品企业"></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="content-right" style="width: 35.046%">
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box" style="position: relative;">
              <div class="title">区域危化生产风险指数排名</div>
              <div class="content-body">
                <el-table
                  ref="table3"
                  :data="tableData3"
                  style="width: 100%;"
                  height="164px"
                  :cell-style="{padding:'6px 0px', height: '36px'}"
                  :header-cell-style="{backgroundColor:'#CADFFF', color:'#4A6899', padding:'6px 0px'}"
                  :cell-class-name="tableRowClassName">
                  <el-table-column type="index" label="排名" width="60" align="center"></el-table-column>
                  <el-table-column property="areaName" label="区域名称"></el-table-column>
                  <el-table-column property="riskIndex" align="center" label="危化生产风险指数"></el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box" style="position: relative;">
              <div class="title">企业风险评估分布</div>
              <div class="content-body">
                <div v-show="echarts4ShowFlag" id="annular4" style="width: 100%;height: 181px"></div>
                <div v-show="!echarts4ShowFlag" style="width: 100%;height: 181px;color: #909399;font-size: 14px;text-align: center;line-height: 180px;">暂无数据</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box" style="margin-bottom: 0px;">
              <div class="title">重大危险源</div>
              <div class="content-body">
                <div v-show="echarts5ShowFlag" id="annular5" style="width: 57%;height: 239px;float: left;"></div>
                <div v-show="!echarts5ShowFlag" style="width: 57%;height: 239px;color: #909399;font-size: 14px;text-align: center;line-height: 230px;">暂无数据</div>
                <div class="source-body">
                  <div class="source-part">
                    <div class="source-title">重大<br>危险源数量</div>
                    <div class="source-value">{{dangerSourceCount.dangerSourceCount}}</div>
                  </div>
                  <div class="source-part">
                    <div class="source-title">园区重大<br>危险源数量</div>
                    <div class="source-value">{{dangerSourceCount.dangerSourceParkCount}}</div>
                  </div>
                  <div class="source-part">
                    <div class="source-title">涉及重大<br>危险源企业数量</div>
                    <div class="source-value">{{dangerSourceCount.dangerSourceEntCount}}</div>
                  </div>
                  <div class="source-part">
                    <div class="source-title">涉及一二级重大<br>危险源企业数量</div>
                    <div class="source-value">{{dangerSourceCount.dangerSourceOtCount}}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import dd from 'gdt-jsapi'
import govheader from '@/components/govheader'
import govnavigation from '@/components/govnavigation'
const echarts = require('echarts')
export default {
  components: { govheader, govnavigation },
  name: 'zfPerMuBenefit',
  data () {
    return {
      selectLegend: '重点监管危险化工工艺',
      zfNameflag: true,
      tableData1: [],
      tableData2: [],
      tableData3: [],
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      option5: {},
      myChart1: {},
      myChart2: {},
      myChart3: {},
      myChart4: {},
      myChart5: {},
      center: {
        '杭州市': [119.539823, 29.870667],
        '宁波市': [121.580925, 29.676002],
        '温州市': [120.455764, 27.880064],
        '嘉兴市': [120.802189, 30.652582],
        '湖州市': [119.873415, 30.780146],
        '绍兴市': [120.580041, 29.767623],
        '金华市': [119.999656, 29.105538],
        '衢州市': [118.705947, 28.875889],
        '舟山市': [122.233931, 30.231275],
        '台州市': [121.117506, 28.682316],
        '丽水市': [119.579372, 28.183492]
      },
      option1Data: [],
      option1Scatter1Data: [],
      option1Scatter2Data: [],
      option1Scatter3Data: [],
      option1Scatter4Data: [],
      option2XData: [],
      option2Data: [],
      option3XData: [],
      option3Data: [],
      option3TaxData: [],
      option3AddData: [],
      option4Data: [],
      option5Data: [],
      keySupervisionTechnologyAndEntCount: {
        keySupervisionTechnologyCount: 0,
        keySupervisionTechnologyEntCount: 0
      },
      inProvinceTotal: {
        chemicalCount: 0,
        dangerSourceCount: 0,
        jobCount: 0,
        technologyCount: 0
      },
      keySupervisionChemicalsType: {
        keySupervisionChemicalsTypeCount: 0,
        keySupervisionChemicalsTypeParkCount: 0
      },
      dangerSourceCount: {
        dangerSourceCount: 0,
        dangerSourceEntCount: 0,
        dangerSourceOtCount: 0,
        dangerSourceParkCount: 0
      },
      echarts2ShowFlag: true,
      echarts3ShowFlag: true,
      echarts4ShowFlag: true,
      echarts5ShowFlag: true,
      table1Interval: null,
      table2Interval: null,
      table3Interval: null,
      echarts1Interval: null,
      echarts2Interval: null,
      echarts3Interval: null,
      echarts4Interval: null
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({}).then(res => {
        if (res) {
          let params = {
            applicationFlag: '20',
            authCode: res.auth_code
          }
          this.$http.post(`/home/sys/loginfree/authentication`, params)
            .then(({ data: res }) => {
              console.log('res2:', res)
              this.$store.commit('zfName', res.data.lastName)
              if (res.code !== 0) {
                this.zfNameflag = false
              }
            }).catch(() => {
              this.zfNameflag = false
            })
        }
      }).catch(() => {
        this.zfNameflag = false
      })
    }
  },
  // 调用
  mounted () {
    this.getData()
  },
  beforeDestroy () {
    clearInterval(this.table1Interval)
    clearInterval(this.table2Interval)
    clearInterval(this.table3Interval)
    clearInterval(this.echarts1Interval)
    clearInterval(this.echarts2Interval)
    clearInterval(this.echarts3Interval)
    clearInterval(this.echarts4Interval)
  },
  methods: {
    getData () {
      let today = new Date()
      let month = today.getMonth() + 1
      month = month < 10 ? '0' + month : '' + month
      let day = today.getDate()
      day = day < 10 ? '0' + day : '' + day
      let searchDate = today.getFullYear() + '-' + month + '-' + day

      this.$http.post(`/home/government/govParkRiskAssessment/getSafetyOverview`,
        {
          searchDate: searchDate
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.keySupervisionTechnologyAndEntCount = res.data.keySupervisionTechnology.keySupervisionTechnologyAndEntCount
            this.inProvinceTotal = res.data.cityCountInfo.inProvinceTotal
            this.keySupervisionChemicalsType = res.data.keySupervisionChemical.keySupervisionChemicalsType
            this.dangerSourceCount = res.data.dangerSource.dangerSourceCount

            this.tableData1 = res.data.parkRiskAssessment.parkSafetyLevelSort
            this.tableData2 = res.data.keySupervisionChemical.keySupervisionChemicalsTypeDistribution
            this.tableData3 = res.data.riskIndexRank

            this.option1Data = res.data.cityCountInfo.cityCountInfo.map(item => {
              return {
                name: item.cityName,
                workmanship: item.technologyCount,
                goods: item.chemicalCount,
                source: item.dangerSourceCount,
                task: item.jobCount
              }
            })
            this.option1Scatter1Data = this.option1Data.map(item => {
              return this.center[item.name].concat(item.workmanship)
            })
            this.option1Scatter2Data = this.option1Data.map(item => {
              return this.center[item.name].concat(item.goods)
            })
            this.option1Scatter3Data = this.option1Data.map(item => {
              return this.center[item.name].concat(item.source)
            })
            this.option1Scatter4Data = this.option1Data.map(item => {
              return this.center[item.name].concat(item.task)
            })

            console.log(res.data.parkRiskAssessment.parkSafetyLevelDistribution)

            for (let i in res.data.parkRiskAssessment.parkSafetyLevelDistribution) {
              this.option2Data.push({
                name: i,
                value: res.data.parkRiskAssessment.parkSafetyLevelDistribution[i]
              })
            }

            this.option3Data = res.data.keySupervisionTechnology.keySupervisionTechnologyDistribution.map(item => {
              return {
                name: item.technologyTypeName,
                value: item.technologyCount
              }
            })

            this.option4Data = res.data.safetyLevelDistribution.map(item => {
              return {
                name: item.evaluationResults,
                value: item.entCount
              }
            })

            this.option5XData = res.data.dangerSource.dangerSourceDistribution.map(item => {
              return item.dangerSourceLevelName
            })
            this.option5Data = res.data.dangerSource.dangerSourceDistribution.map(item => {
              return item.dangerSourceCount
            })

            this.echarts2ShowFlag = this.option2Data.length > 0
            this.echarts3ShowFlag = this.option3Data.length > 0
            this.echarts4ShowFlag = this.option4Data.length > 0
            this.echarts5ShowFlag = this.option5XData.length > 0

            this.renderMyChart1()
            this.renderMyChart2()
            this.renderMyChart3()
            this.renderMyChart4()
            this.renderMyChart5()

            this.getright_table('table1')
            this.getright_table('table2')
            this.getright_table('table3')
          } else {
            this.$message({ message: res.message, type: 'warning' })
          }
        })
    },
    changeMap (legend) {
      if (legend !== this.selectLegend) {
        this.selectLegend = legend
        this.option1.series[1].name = legend
        if (legend === '重点监管危险化工工艺') {
          this.option1.series[1].itemStyle.color = '#F63F5E'
          this.option1.series[1].data = this.option1Scatter1Data
        } else if (legend === '重点监管危化品') {
          this.option1.series[1].itemStyle.color = '#FF8C2F'
          this.option1.series[1].data = this.option1Scatter2Data
        } else if (legend === '重大危险源') {
          this.option1.series[1].itemStyle.color = '#5F83FF'
          this.option1.series[1].data = this.option1Scatter3Data
        } else if (legend === '今日安全作业数') {
          this.option1.series[1].itemStyle.color = '#65D77B'
          this.option1.series[1].data = this.option1Scatter4Data
        }
        this.myChart1.setOption(this.option1)
      }
    },
    // 浙江省地图
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('annular1'))
      let uploadedDataURL = require('./zhejiang.json')

      echarts.registerMap('js', uploadedDataURL)
      this.option1 = {
        tooltip: {
          trigger: 'item',
          formatter: function (para) {
            if (para.seriesType === 'map') {
              if (para.data) {
                return para.name + '<br>' +
                  '重点监管危险化工工艺 : ' + para.data.workmanship + '<br>' +
                  '重点监管危化品 : ' + para.data.goods + '<br>' +
                  '重大危险源 : ' + para.data.source + '<br>' +
                  '今日安全作业数 : ' + para.data.task
              } else {
                return para.name + '<br>' +
                  '重点监管危险化工工艺 : ' + 0 + '<br>' +
                  '重点监管危化品 : ' + 0 + '<br>' +
                  '重大危险源 : ' + 0 + '<br>' +
                  '今日安全作业数 : ' + 0
              }
            } else {
              return para.seriesName + ' : ' + para.data[2]
            }
          }
        },
        geo: [
          {
            map: 'js',
            roam: false, // 是否允许缩放
            zoom: 0.9, // 默认显示级别
            layoutSize: '100%',
            layoutCenter: ['45%', '50%'],
            itemStyle: {
              areaColor: 'rgba(156, 216, 255, 0.7)',
              borderColor: 'rgb(27, 172, 255)',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                areaColor: '#005DDC'
              },
              label: {
                show: true,
                color: '#fff'
              }
            },
            label: {
              show: true,
              color: '#333333'
            },
            zlevel: 3
          }
        ],
        series: [
          {
            type: 'map',
            geoIndex: 0,
            data: this.option1Data
          },
          {
            name: '重点监管危险化工工艺',
            type: 'scatter',
            coordinateSystem: 'geo',
            itemStyle: {
              color: '#F63F5E'
            },
            label: {
              normal: {
                show: true,
                color: '#fff',
                position: 'inside',
                fontSize: 10,
                formatter: function (para) {
                  return para.data[2]
                }
              }
            },
            symbol: 'circle',
            symbolOffset: [0, 20],
            symbolSize: 25,
            data: this.option1Scatter1Data,
            zlevel: 10
          }
        ]
      }
      this.myChart1.setOption(this.option1)
      this.autoPlay(this.myChart1, this.option1, 'echarts1Interval')
    },
    renderMyChart2 () {
      this.myChart2 = echarts.init(document.getElementById('annular2'))
      this.option2 = {
        color: ['#00A3FF', '#65D77B', '#FF8C2F', '#A885F0'],
        tooltip: {
          trigger: 'item',
          extraCssText:'z-index: 100'
        },
        legend: {
          show: true,
          orient: 'vertical',
          bottom: '10%',
          right: '25%'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['30%', '50%'],
            data: this.option2Data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{d}%',
              fontSize: '12'
            }
          }
        ]
      }
      this.myChart2.setOption(this.option2)
      this.autoPlay(this.myChart2, this.option2, 'echarts2Interval')
    },
    renderMyChart3 () {
      this.myChart3 = echarts.init(document.getElementById('annular3'))
      this.option3 = {
        color: ['#00A3FF', '#00DBD4', '#A885F0', '#5F83FF', '#65D77B'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: true,
          orient: 'vertical',
          top: '20%',
          right: '12%'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['30%', '50%'],
            data: this.option3Data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{d}%',
              fontSize: '12'
            }
          }
        ]
      }
      this.myChart3.setOption(this.option3)
      this.autoPlay(this.myChart3, this.option3, 'echarts3Interval')
    },
    renderMyChart4 () {
      this.myChart4 = echarts.init(document.getElementById('annular4'))
      this.option4 = {
        color: ['#00A3FF', '#65D77B', '#FF8C2F', '#A885F0'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: true,
          orient: 'vertical',
          top: '20%',
          right: '20%'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['30%', '50%'],
            data: this.option4Data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{d}%',
              fontSize: '12'
            }
          }
        ]
      }
      this.myChart4.setOption(this.option4)
      this.autoPlay(this.myChart4, this.option4, 'echarts4Interval')
    },
    renderMyChart5 () {
      this.myChart5 = echarts.init(document.getElementById('annular5'))
      this.option5 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis'
        },
        color: ['#13B9FB'],
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        grid: {
          left: '0%',
          right: '0%',
          bottom: '2%',
          top: '25%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            data: this.option5XData
          }
        ],
        yAxis: {
          type: 'value',
          name: '企业数量',
          splitLine: {
            lineStyle: {
              color: '#8DAFDD'
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                offset: 0,
                color: '#00A3FF '
              },
              {
                offset: 1,
                color: '#2CB3FF'
              }
              ])
            },
            data: this.option5Data
          }
        ]
      }
      this.myChart5.setOption(this.option5)
    },
    getright_table (tableRef) {
      var isScroll = true
      var waitFlag = 0
      // 拿到表格挂载后的真实DOM
      const table = this.$refs[tableRef]
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.addEvent(divData, 'mouseenter', function () {
        isScroll = false
      })
      this.addEvent(divData, 'mouseleave', function () {
        isScroll = true
      })
      this[tableRef + 'Interval'] = setInterval(() => {
        if (isScroll) {
          // if (divData.scrollTop % 36 > 0 || waitFlag > 200) {
          //   waitFlag = 0
          //   // 元素自增距离顶部1像素
          //   divData.scrollTop += 1
          //   // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          //   if (divData.clientHeight + divData.scrollTop + 1 >= divData.scrollHeight) {
          //     // 重置table距离顶部距离
          //     divData.scrollTop = 0
          //   }
          // } else {
          //   waitFlag++
          // }
          if ((divData.scrollTop % 36 === 0 || divData.clientHeight + divData.scrollTop + 1 >= divData.scrollHeight) && waitFlag < 200) {
            waitFlag++
          } else {
            waitFlag = 0
            // 元素自增距离顶部1像素
            divData.scrollTop += 1
            // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
            if (divData.clientHeight + divData.scrollTop >= divData.scrollHeight) {
              // 重置table距离顶部距离
              divData.scrollTop = 0
            }
          }
        }
      }, 7)
    },
    addEvent (obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + sEvent, fn)
      } else {
        obj.addEventListener(sEvent, fn, false)
      }
    },
    autoPlay (myChart, option, timer) {
      var _this = this
      let flag = true
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        flag = false
        clearInterval(_this[timer])
        // 取消之前高亮图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })

        charPiecurrentIndex = param.dataIndex
        // **解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })

        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      _this[timer] = setInterval(chartHover, 2000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          _this[timer] = setInterval(chartHover, 2000)
          flag = true
        }
      })
    },
    tableRowClassName ({ row, column, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'table-row1'
      } else {
        return 'table-row2'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  background-image: url("../../../assets/img/zf/bg.png");
  background-size: 100% 100%;
}
.box {
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px;
  margin-bottom: 10px;
}
.title {
  width: 100%;
  color: #1c4ca1;
  font-weight: 700;
}
.content {
  width: 100%;
  padding: 10px;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
}
.craft-body {
  width: 47.5%;
  background: #D6EDFF;
  border-radius: 6px;
  padding: 10px;
  .craft-title {
    width: 100%;
    height: 16px;
  }
  .craft-value {
    color: #00A3FF;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    text-align: right;
  }
}
.chemicals-body {
  width: 47.5%;
  background: #E0EBFE;
  border: 2px solid #CADFFF;
  border-radius: 6px;
  padding: 10px;
  .chemicals-value {
    color: #00A3FF;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    text-align: right;
  }
  .title-content {
    float: left;
    margin-left: 5px;
    color: #4B5463;
    font-size: 13px;
    line-height: 18px;
  }
}
.title-blue {
  width: 4px;
  height: 15px;
  background-color: #00A3FF;
  float: left;
}
.title-content {
  float: left;
  margin-left: 5px;
  color: #4B5463;
  font-size: 13px;
  line-height: 15px;
}

.source-body {
  float: right;
  width: 43%;
  height: 230px;
  padding-left: 15px;
  .source-part {
    width: 100%;
    height: 52px;
    background: #D3EBFF;
    border-radius: 8px;
    margin-bottom: 7px;
  }
  .source-title {
    float: left;
    width: 58%;
    font-size: 13px;
    color: #4B5463;
    line-height: 20px;
    padding-top: 5px;
    padding-left: 15px;
  }
  .source-value {
    float: right;
    font-size: 18px;
    font-weight: 600;
    color: #00A3FF;
    line-height: 38px;
    padding-top: 7px;
    padding-right: 15px;
  }
}
.legend-body {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 42%;
  height: 80px;
  .legend-content {
    width: 100%;
    height: 16px;
    margin-bottom: 5px;
    .legend-point {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      float: left;
      margin-right: 5px;
      margin-top: 4px;
    }
    .legend-title {
      font-size: 12px;
      color: #4B5463;
      float: left;
      line-height: 16px;
    }
    .legend-value {
      float: right;
      font-size: 14px;
      font-weight: 600;
    }
  }
}
/deep/ .table-row1 {
  background-color: #EBF3FF;
}
/deep/ .table-row2 {
  background-color: #D6E6FF;
}
/deep/ .gutter {
  background-color: #CADFFF;
}
/deep/ .el-table__body-wrapper {
  background-color: rgb(234, 242, 255);
}

.main ::-webkit-scrollbar {/*滚动条整体样式*/
  width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.main ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0.1);
}
.main ::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255,0.2);
  border-radius: 10px;
  background: #EDEDED;
}
</style>
